<template>
  <van-popup v-model:show="state.show" class="popup-box" style="height: 100%" position="right">
    <div class="page">
      <global-header title="会员资料" @back="state.show = false">
        <!-- <template #right>
          <div class="mr-[12px]">确定</div>
        </template> -->
      </global-header>
      <main class="page-main">
        <van-field v-model="state!.Note" label="会员备注" placeholder="请输入会员备注"></van-field>
        <van-field :model-value="memberInfo?.UserId" label="ID" readonly></van-field>
        <van-field :model-value="memberInfo?.Name" label="会员账号" readonly></van-field>
        <van-field
          :model-value="memberInfo?.Nickname || '---'"
          label="会员昵称"
          readonly
        ></van-field>
        <van-field :model-value="wechat.BankNumber || '---'" label="会员微信" readonly></van-field>
        <van-field :model-value="wechat.Qq || '---'" label="会员QQ" readonly></van-field>
        <van-field
          :model-value="alipay.BankNumber || '---'"
          label="支付宝账号"
          readonly
        ></van-field>
        <van-field
          :model-value="alipay.BankUsername || '---'"
          label="支付宝姓名"
          readonly
        ></van-field>
        <van-field :model-value="'******'" label="登录密码" readonly></van-field>
        <van-field
          :model-value="formatDate(memberInfo?.CreatedAt) || '---'"
          label="注册时间"
          readonly
        ></van-field>
        <van-field label="头像" readonly>
          <template #input>
            <!-- <img :src="`${baseImgUrl}${memberInfo?.Avatar}`" class=" size-[44px]"> -->
            <van-uploader
              :max-count="1"
              :model-value="
                !memberInfo?.Avatar ? [] : [{ url: `${baseImgUrl}${memberInfo?.Avatar}` }]
              "
              :deletable="false"
            ></van-uploader>
          </template>
        </van-field>
        <van-field label="支付宝支付" readonly>
          <template #input>
            <van-uploader
              :max-count="1"
              :model-value="!alipay.QrCode ? [] : [{ url: `${baseImgUrl}${alipay.QrCode}` }]"
              :deletable="false"
            ></van-uploader>
          </template>
        </van-field>
        <van-field label="微信支付" readonly>
          <template #input>
            <van-uploader
              :max-count="1"
              :model-value="!wechat.QrCode ? [] : [{ url: `${baseImgUrl}${wechat.QrCode}` }]"
              :deletable="false"
            ></van-uploader>
          </template>
        </van-field>
        <van-field
          :model-value="bank.BankUsername || '---'"
          label="银行卡姓名"
          readonly
        ></van-field>
        <van-field :model-value="bank.BankName || '---'" label="银行卡类型" readonly></van-field>
        <van-field
          :model-value="bank.BankNumber || '---'"
          label="银行卡开户地"
          readonly
        ></van-field>
        <van-field :model-value="bank.BankAddress || '---'" label="银行卡账号" readonly></van-field>
        <van-field v-if="usdt.length" label="虚拟币" readonly>
          <template #input>
            <template v-for="item in usdt">
              <van-field label="虚拟币二维码" readonly>
                <template #input>
                  <van-uploader
                    :max-count="1"
                    :model-value="[{ url: `${baseImgUrl}${item.QrCode}` }]"
                    :deletable="false"
                  ></van-uploader>
                </template>
              </van-field>
              <van-field
                :model-value="item.BankName || '---'"
                label="虚拟币名称"
                readonly
              ></van-field>
              <van-field
                :model-value="item.BankNumber || '---'"
                label="虚拟币地址"
                readonly
              ></van-field>
            </template>
          </template>
        </van-field>
      </main>

      <div class="p-[15px] bg-[#FFFFFF]">
        <div class="flex gap-[10px]">
          <van-button
            @click="update"
            class="!flex-1 !bg-[#3976CC] !text-[#FFFFFF] rounded-[5px]"
            block
          >
            保存
          </van-button>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script setup lang="ts">
import { reqUserInfo, reqUserNoteEdit } from "@/api/user";
import { usePremsStore } from "@/store/modules/prems";
import { formatDate } from "@/utils/common";
import { toast } from "@/utils/toast";

type BankInfoMo = MemberInfoMo["BankInfo"][0];
const baseImgUrl = "https://f.shanshanim.vip/";

const props = withDefaults(
  defineProps<{
    uid: number | null;
  }>(),
  {}
);

const premsStore = usePremsStore();
const emit = defineEmits(["update"]);
const memberInfo = ref<MemberInfoMo | null>(null);
const state = reactive({
  show: false,
  loading: false,
  Note: ""
});
const defaultPaymentData: BankInfoMo = {
  BankAddress: "",
  BankName: "",
  BankNumber: "",
  BankType: <1 | 2 | 3 | 4>1,
  BankUsername: "",
  Id: 0,
  Qq: "",
  QrCode: ""
};
const wechat = ref<BankInfoMo>({
  ...defaultPaymentData
});
const alipay = ref<BankInfoMo>({
  ...defaultPaymentData,
  BankType: 2
});
const bank = ref<BankInfoMo>({
  ...defaultPaymentData,
  BankType: 3
});
const usdt = ref<BankInfoMo[]>([]);

const getData = async () => {
  if (!props.uid) return;
  try {
    state.loading = true;
    const res = await reqUserInfo(props.uid);
    state.loading = false;
    memberInfo.value = res.data;
    state.Note = memberInfo.value?.Note || "";
    const wechatData = res.data.BankInfo.find(item => item.BankType === 1)!;
    if (wechatData) {
      wechat.value = wechatData;
    }
    const alipayData = res.data.BankInfo.find(item => item.BankType === 2)!;
    if (alipayData) {
      alipay.value = alipayData;
    }
    const bankData = res.data.BankInfo.find(item => item.BankType === 3)!;
    if (bankData) {
      bank.value = bankData;
    }
    usdt.value = res.data.BankInfo.filter(item => item.BankType === 4);
  } catch (error) {
    state.loading = false;
    console.log(error);
  }
};
const closed = () => {
  state.show = false;
};

const update = async () => {
  if (!premsStore.isEditUserSetting) {
    toast.info("暂无权限");
    return;
  }
  try {
    await reqUserNoteEdit({
      UserId: Number(memberInfo.value?.UserId),
      Note: state!.Note
    });
    // emit("update");
    toast.success("修改备注成功");
    setTimeout(() => {
      closed();
    }, 200);
  } catch (error) {
    console.log(error);
  }
};

const open = () => {
  state.show = true;
  getData();
  state.Note = "";
};
defineExpose({
  closed,
  open
});
</script>
